<template>
  <div class="div-rol">
    <el-page-header>
      <template #breadcrumb>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ name: 'MyCeHome' }">
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'RoleList' }"
            >权限管理</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'RoleList' }"
            >角色管理</el-breadcrumb-item
          >
        </el-breadcrumb>
      </template>
      <template #content>
        <span class="text-large font-600 mr-3"> Title </span>
      </template>
    </el-page-header>

    <main class="rol-main">
      <el-button type="primary" style="margin: 10px 0px" @click="addRole"
        >添加角色</el-button
      >
      <table cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th></th>
            <th></th>
            <th>角色名称</th>
            <th>角色描述</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in roleList">
            <td style="text-align: center; width: 50px">></td>
            <td>{{ index + 1 }}</td>
            <td>{{ item.roleName }}</td>
            <td>{{ item.roleDesc }}</td>
            <td style="width: 300px">
              <el-button type="primary" @click="compileList(item.id)"
                >编辑</el-button
              >
              <el-button type="danger" @click="deletaCompile(item.id, index)"
                >删除</el-button
              >
              <el-button type="warning" @click="allocationJurisdiction"
                >分配权限</el-button
              >
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 编辑遮罩层 -->
      <CompileUsers v-if="isShowCompileUsers" @ddd="ddd" :hihi="comId" />
      <!-- 添加用户 -->
      <AddRole v-if="isShowAddRole" @eee="eee" />
      <!-- 分配权限 -->
      <AllocationJurisdiction v-if="isallocationJurisdiction" @fff="fff" />
    </main>
  </div>
</template>
 
<script setup>
// 编辑遮罩层
import CompileUsers from "../../components/CompileUsers";
// 添加用户
import AddRole from "../../components/AddRole";
// 分配权限
import AllocationJurisdiction from "../../components/AllocationJurisdiction";
import axios from "axios";
import VueCookies from "vue-cookies";
import { reactive, ref, onMounted, watchEffect } from "vue";
// 角色列表
let roleList = ref([]);
// 编辑遮罩层
let isShowCompileUsers = ref(false);
// 添加遮罩层
let isShowAddRole = ref(false);
// 分配权限遮罩层
let isallocationJurisdiction = ref(false);

// 编辑的id
let comId = ref();
// 编辑
function compileList(id) {
  comId.value = id;
  isShowCompileUsers.value = true;
}
function ddd(val) {
  isShowCompileUsers.value = val;
}
// 删除
function deletaCompile(id, index) {
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  axios.delete(`/api/roles/${id}`, { headers }).then((res) => {
    alert(res.data.meta.msg);
    roleList.value.splice(index, 1);
  });
}
function eee(val) {
  isShowAddRole.value = val;
}
// 添加角色
function addRole() {
  isShowAddRole.value = true;
}
// 分配权限
function allocationJurisdiction() {
  isallocationJurisdiction.value = true;
}
function fff(val) {
  isallocationJurisdiction.value = val;
}
onMounted(() => {
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  axios.get("/api/roles", { headers }).then((res) => {
    roleList.value = res.data.data;
    console.log(roleList.value);
  });
});
watchEffect(() => {
  if (isShowCompileUsers.value == false && isShowAddRole.value == false) {
    const headers = {
      Authorization: VueCookies.get("token"),
    };
    axios.get("/api/roles", { headers }).then((res) => {
      roleList.value = res.data.data;
    });
  }
});
</script>

<style scoped>
.div-rol {
  flex-grow: 1;
  height: auto;
  padding: 20px;
}
/*  */
.rol-main {
  flex-grow: 1;
  height: auto;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  position: relative;
}
/* 表格 */
tr,
td,
th {
  border: 1px solid;
  padding: 10px;
}
table {
  width: 100%;
  height: 50px;
  border: 1px solid;
}
thead {
  width: 100%;
  height: 50px;
  border: 1px solid;
}
</style>